<template>
  <view>
    <view style="height:50px;"></view>
    <view class="xuni-tabbar-bottom">
      <view class='xbottom-menu'>
        <view class="xuni-tabbar__item" v-for="item in navList" @tap="goTo" :data-path="item.path" :data-app_id="item.appId">
          <view class="xuni-tabbar__bd" style="height: 50px;">
            <uni-icons :type="item.img" size="25" :color="item.textColor" style="height:28px;"></uni-icons>
            <view :class="'xuni-tabbar__label'" :style="'color:'+item.textColor+';'">
              {{ item.text }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

</template>
<script>
import x from '@/common/base.js';
export default {
  name: "bootNav",
  data() {
    return {
      navTextClass: "xuni-tabbar_normal",
      navTextActiveClass: "xuni-tabbar_active",
      navList:
        [{
          "name":"sign",
          "text": "报名",
          "img": "navigate-filled",
          "path": "/pages/sign/sign",
          "appId":"",
        },{
          "name":"home",
          "text": "做题",
          "img": "list",
          "path": "/pages/index/index",
          "appId":"",
        },{
          "name":"my",
          "text": "我的",
          "img": "person-filled",
          "path": "/pages/my/my",
          "appId":"",
        }]
      }
  },


  mounted: function () {
     this.getNav();
  },

  methods: {
    getNav(){
      var t = this;
      var cacheNav = t.xCacheGet('cacheNav');
      if(!cacheNav){
        t.x_request('api/nav/index',{},function(t,res){
          if(res.code === 1){
            t.navList = res.data;
            t.xCacheSet('cacheNav',res.data,10)
          }
          t.initNav();
        })
      }else{
        t.navList = cacheNav;
        t.initNav();
      }
    },
    initNav() {
      for (var i in this.navList) {
        if (this.navList[i]['name'] == this.nav) {
          this.navList[i].textColor = '#3495fc';
        }else{
          this.navList[i].textColor = '#7a7e83';
        }
      }
    },
    goTo(t) {
      this.x_redirect(t.currentTarget.dataset.path,t.currentTarget.dataset.app_id)
    }
  },
  props: ["nav"],
};
</script>
<style>
.xuni-tabbar-bottom {
  position: fixed;
  bottom: 0px;
  display: block;
  box-sizing: border-box;
  width: 100%;
  z-index: 998;
}

.xbottom-menu {
  background-color: rgb(248, 248, 248);
  backdrop-filter: none;
  bottom: 0;
  display: flex;
  z-index: 998;
  box-sizing: border-box;
}

.xuni-tabbar__item {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-flex: 1;
  flex: 1;
  font-size: 0;
  text-align: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.xuni-tabbar__bd {
  height: 50px;
  position: relative;
  flex-direction: column;
  cursor: pointer;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}

.xuni-tabbar__icon {
  position: relative;
  display: inline-block;
  margin-top: 5px;
}

.xuni-tabbar__icon img {
  width: 100%;
  height: 100%;
}

.xuni-tabbar__label {
  font-size: 10px;
  line-height: normal;
  margin-top: 3px;
}

.xuni-tabbar_normal {
  color: rgb(122, 126, 131);
}

.xuni-tabbar_active {
  color: #a67d41;
}

</style>
